<template>
  <a-card :bordered="false">
    <el-row :gutter="12" class="goBusiness">
      <el-col :span="4">
        <el-card :shadow="businessType=='02'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('02')">
            <h3 style="margin:0;padding:10px 0;text-align:center">商超</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='03'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('03')">
            <h3 style="margin:0;padding:10px 0;text-align:center">洗衣</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='04'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('04')">
            <h3 style="margin:0;padding:10px 0;text-align:center">家政</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card :shadow="businessType=='05'?'always':'hover'" style="cursor: pointer;">
          <div @click="goBusiness('05')">
            <h3 style="margin:0;padding:10px 0;text-align:center">咖吧</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="01" tab="门店类目" :forceRender="true">
        <shangChao ref="shangChao" :businessType="businessType" />
      </a-tab-pane>
      <a-tab-pane key="02" tab="平台类目" :forceRender="true">
        <ptCategory ref="ptCategory" :businessType="businessType" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script src='./index'></script>

<style lang="less">
.goBusiness {
  margin: 10px 0;
  .el-card__body {
    padding: 0;
  }
  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5)!important
  }
}
</style>